<template>
  <div class="layout-container flex">
    <!-- 选择具体的业务组件 -->
    <div class="left flex wrap space-between">
      <slot />
    </div>
    <!-- 显示对应的业务组件 -->
    <div class="center">
      <router-view v-slot="{ Component }">
        <component :serialNum="1" :status="store.coms[store.currentMaterialCom].status" :is="Component" />
      </router-view>
    </div>
    <!-- 编辑面板 -->
    <div class="right">
      <EditPannel :currentComponent="currentComponent" />
    </div>
  </div>
</template>

<script setup>
import { useMaterialStore } from '@/stores/useMaterial';
import { computed, provide } from 'vue';
import { ElMessage } from 'element-plus';
import { changeShowStatus } from '@/utils';

import EditPannel from '@/components/SurveyComs/EditItems/EditPannel.vue';

const store = useMaterialStore();

const currentComponent = computed(() => store.coms[store.currentMaterialCom]);

const updateStatus = (configKey, payload) => {
  // 拿到新的状态数据之后，就应该去修改仓库里面的数据
  switch (configKey) {
    case 'title':
    case 'desc':
      if (typeof payload !== 'string') {
        console.error('Invalid payload type for "title or desc". Expected string.');
        return;
      }
      store.setTextStatus(currentComponent.value.status[configKey], payload);
      break;
    case 'options':
      if (typeof payload === 'number') {
        const result = store.removeOption(currentComponent.value.status[configKey], payload);
        if (result) {
          ElMessage.success('删除成功！');
        } else {
          ElMessage.error('至少保留两个选项！');
        }
      } else if (typeof payload === 'object') {
        if (payload.DateTime) {
          store.setDateTime(currentComponent.value.status[configKey], payload.value);
        } else {
          store.setOptionLink(currentComponent.value.status[configKey], payload);
        }
      } else if (payload === 'addPicOption') {
        store.addPicOption(currentComponent.value.status[configKey]);
      } else if (typeof payload === 'boolean') {
        store.setOptionIsUse(currentComponent.value.status[configKey], payload);
      } else {
        store.addOption(currentComponent.value.status[configKey]);
      }
      break;
    case 'position':
      if (typeof payload !== 'number') {
        console.error('Invalid payload type for "type". Expected string.');
        return;
      }
      store.setPosition(currentComponent.value.status[configKey], payload);
      break;
    case 'titleSize':
    case 'descSize':
      if (typeof payload !== 'number') {
        console.error('Invalid payload type for "type". Expected string.');
        return;
      }
      store.setFontSize(currentComponent.value.status[configKey], payload);
      break;
    case 'titleWeight':
    case 'descWeight':
      if (typeof payload !== 'number') {
        console.error('Invalid payload type for "type". Expected string.');
        return;
      }
      store.setFontWeight(currentComponent.value.status[configKey], payload);
      break;
    case 'titleItalic':
    case 'descItalic':
      if (typeof payload !== 'number') {
        console.error('Invalid payload type for "type". Expected string.');
        return;
      }
      store.setFontItalic(currentComponent.value.status[configKey], payload);
      break;
    case 'titleColor':
    case 'descColor':
      if (typeof payload !== 'string') {
        console.error('Invalid payload type for "type". Expected string.');
        return;
      }
      store.setFontColor(currentComponent.value.status[configKey], payload);
      break;
    case 'type':
      if (typeof payload === 'object') {
        store.setTextType(currentComponent.value.status[configKey], payload.value);
      } else {
        changeShowStatus(currentComponent.value.status, payload);
        store.setTextType(currentComponent.value.status[configKey], payload);
      }
      break;
    default:
      console.warn(`Unknown configKey: ${configKey}`);
  }
};

const getLink = (row) => {
  updateStatus('options', row);
};
provide('updateStatus', updateStatus);
provide('getLink', getLink);
</script>

<style scoped lang="scss">
.layout-container {
  width: 100%;
  // Header组件高度50px，h1高度50px，上下margin 20px，最后20px是额外多减去一部分，避免贴底
  height: calc(100vh - 100px - 40px - 20px);
  align-items: flex-start;
  border: 1px solid var(--border-color);
  border-top-right-radius: var(--border-radius-lg);
  border-bottom-left-radius: var(--border-radius-lg);
  border-bottom-right-radius: var(--border-radius-lg);
}
.left {
  width: 180px;
  text-align: center;
  align-items: flex-start;
  padding: 20px;
}
.center {
  width: 550px;
  // 多减去的60px是上下的padding，，最后20px是额外多减去一部分，避免贴底
  height: calc(100vh - 100px - 40px - 60px - 20px);
  overflow-y: auto;
  padding: 30px;
  border-left: 1px solid var(--border-color);
}
.right {
  width: 400px;
  height: calc(100vh - 100px - 40px - 20px);
  overflow-y: auto;
  border-left: 1px solid var(--border-color);
}
</style>
